<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>募捐单查看</title>
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
</head>


<body>
    <link rel="stylesheet" href="../../element/element.css">
    <script src="../../element/vue.js"></script>
    <script src="../../element/index.js"></script>
    <script src="../../js/axios.min.js"></script>
    <div id="app">
        <h2 style="text-align: center;">金钱日志</h2>
        <el-row>
            <el-col :span="6">
                <el-select v-model="filterStatus" placeholder="请选择状态">
                    <el-option label="充值" value=1></el-option>
                    <el-option label="提现" value=2></el-option>
                    <el-option label="退回" value=3></el-option>
                    <el-option label="所有" value=""></el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-input v-model="userId" placeholder="对用户ID检索"></el-input>
            </el-col>
            <el-col :span="4">
                <el-button @click="uh">查询</el-button>
            </el-col>


        </el-row>


        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <!-- 充值记录，提现记录和退回记录 -->
            <el-tab-pane label="记录" name="doRecharge">
                <el-table :data="doRechargeRecords" style="width: 100%">
                    <el-table-column prop="moneyLogId" label="记录单号"></el-table-column>
                    <el-table-column prop="userId" label="用户ID"></el-table-column>
                    <el-table-column label="记录时间" prop="time" sortable>
                        <template slot-scope="scope">
                            {{ calculateCompletion(scope.row.time) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="message" label="消息"></el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>

    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    activeTab: 'doRecharge',
                    doRechargeRecords: [],
                    filterStatus: '',
                    userId: '',
                    List:[],

                };
            },
            watch: {
                filterStatus: function (newVal, oldVal) {
                    this.filterData(); // 监听filterStatus的变化，并在变化时调用filterData()方法
                }
            },
            methods: {
                //查找
                uh() {
                    if (this.userId === "") {
                        console.log(this.donationList = this.List);
                        return this.donationList = this.List; // 不进行筛选
                    }
                    this.doRechargeRecords = this.List;
                    this.doRechargeRecords = this.doRechargeRecords.filter(item => {
                        if (typeof item.userId === 'number' && !isNaN(parseInt(this.userId))) { // 判断类型是否相同
                            return item.userId === parseInt(this.userId); // 判断值是否相等
                        } else {
                            return false; // 类型不同或转换失败，直接返回false
                        }
                    });
                    console.log('筛选后的数据：', this.doRechargeRecords);
                },
                // 筛选
                filterData() {
                    if (this.filterStatus === "") {
                        return this.doRechargeRecords = this.List; // 不进行筛选
                    }
                    this.doRechargeRecords = this.List;
                    this.doRechargeRecords = this.doRechargeRecords.filter(item => {
                        if (typeof item.flag === 'number' && !isNaN(parseInt(this.filterStatus))) { // 判断类型是否相同
                            return item.flag === parseInt(this.filterStatus); // 判断值是否相等
                        } else {
                            return false; // 类型不同或转换失败，直接返回false
                        }
                    });
                    console.log('筛选后的数据：', this.doRechargeRecords);
                },
                //充值
                fetchdoRechargeRecords() {
                    axios.get('http://localhost:8888/api/money/getMoneyLog')
                        .then(response => {
                            this.List = response.data.data;
                            this.doRechargeRecords=this.List;
                            console.log(this.doRechargeRecords);
                        })
                        .catch(error => {
                            console.error('Error fetching donation records', error);
                        });
                },
                //时间
                calculateCompletion(deadline) {
                    const timestamp = deadline;
                    const date = new Date(timestamp);
                    const year = date.getFullYear();
                    const month = date.getMonth() + 1;
                    const day = date.getDate();
                    const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
                    return formattedDate;
                },

            },
            mounted() {
                // 在页面加载后获取捐款记录数据
                this.fetchdoRechargeRecords();
            }
        });
    </script>
</body>

</html>